<template>
  <BasicModal 
    v-bind="$attrs" 
    @register="registerModal" title="导入数据" 
    :minHeight="120"
    :width="450"
    destroyOnClose
  >
    <ExcelImport 
      :acceptFileTypes="acceptFileTypes" 
      :importConfig="importConfig"
      :bizType="bizType"
      v-model:file-list="fileList"
      v-model:action="importAction"
    />

    <template #footer>
      <Button @click="handleClose">取消</Button>
      <Button type="primary" @click="handleImport">导入</Button>
    </template>
  </BasicModal>
</template>
<script lang="ts" setup>
  import { ref, computed, unref } from "vue"
  import { BasicModal, useModalInner } from "/@/components/Modal"
  import { Button } from "ant-design-vue"
  import ExcelImport from './ExcelImport.vue'
  import { excelProps } from './props'
  import { FileType } from 'ant-design-vue/es/upload/interface';
  import { useMessage } from '/@/hooks/web/useMessage';
  import * as fileApi from "/@/api/infra/file"
  import {defHttp} from '/@/utils/http/axios';

  const emit = defineEmits(["register", "success"])

  const { createMessage, createMessageModal } = useMessage();

  const props = defineProps(excelProps)
  const fileList = ref<FileType[]>([])
  const importAction = ref<string>()

  const [registerModal, { setModalProps, closeModal }] = useModalInner(async (data) => {
    setModalProps({
      confirmLoading: false,
      loading: false,
      canFullscreen: false,
      draggable: false,
    })
  
  })

  const handleClose = () => {
    closeModal()
  }


  const handleImport = async (v) => {
    try {
      if (fileList.value.length == 0) {
        createMessage.warn('请选择要导入的数据文件');
        return;
      }

      if (!props.importConfig.url) {
        createMessage.warn('尚未配置导入url');
        return;
      }
      
      setModalProps({ loading: true });
      const file = fileList.value[0]
      const params = {
        file,
        action: importAction.value,
      };

      const uploadToken = await fileApi.getUploadToken({
        contentType: file.type,
        size: file.size,
        name: file.name,
        bizType: props.bizType,
      })
      const ossKey = uploadToken.key
      const uploadForm = uploadToken.formData
      const uploadUrl = uploadToken.host

      const uploadResult = await fileApi.uploadApi(uploadUrl, {
        file,
        data: uploadForm
      }, () => {}, true)
      console.log('uploadResult', uploadResult)
      if (uploadResult.status != 200) {
        createMessage.error('上传失败，请尝试重新上传')
        props.importConfig?.fail && props.importConfig?.fail()
        return
      }
      console.log('params', params)

      const data = await defHttp.post({ url: props.importConfig.url, params: { ossKey, action: importAction.value } });
      
      closeModal()
      props.importConfig?.success && props.importConfig?.success(data)
      createMessage.success('导入成功')
    } finally {
      setModalProps({ loading: false })
    }
  }
</script>

<style lang="less" scoped>
.import-tips {
  margin-top: 20px;
  display: flex;
  justify-content: center
}
</style>
